<template>
  <div
    ref="pageMenuRef"
    class="page-menu-container"
    :style="{
      backgroundColor: themeStyle[theme].backgroundColor3,
      borderBottom: `1px solid ${themeStyle[theme].borderColor2}`
    }"
  >
    <div class="menu-container">
      <template v-for="(item, index) in menus" :key="index">
        <dropdown :trigger="'click'">
          <div class="menu-item">
            <span
              :style="{
                color: themeStyle[theme].textColor2
              }"
              >{{ item.name }}</span
            >
          </div>

          <template #overlay>
            <div
              class="menu-dropdown-container"
              :style="{
                backgroundColor: themeStyle[theme].backgroundColor1,
                color: themeStyle[theme].textColor2,
                border: `1px solid ${themeStyle[theme].borderColor1}`
              }"
            >
              <template v-for="(child, childrenIndex) in item.children" :key="childrenIndex">
                <div class="menu-dropdown-item" @click="menusStore.menuClick(child.name)">
                  <span>{{ child.name }}</span>
                </div>
              </template>
            </div>
          </template>
        </dropdown>
      </template>
    </div>
    <div></div>
    <div></div>
  </div>
</template>

<script setup lang="ts">
import { Dropdown } from 'ant-design-vue'
import { useMenusStore } from '@renderer/store/menu/menus'
import { storeToRefs } from 'pinia'
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { ref, watch } from 'vue'

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

const menusStore = useMenusStore()
const { menus } = storeToRefs(menusStore)

const pageMenuRef = ref<HTMLElement | null>(null)
watch(
  () => theme.value,
  () => {
    changeTheme()
  }
)
const changeTheme = (): void => {
  const hoverColor = themeStyle.value[theme.value].btnHoverColor2
  const textColor = themeStyle.value[theme.value].textColor1
  //设置--btnHoverColor
  pageMenuRef.value?.style.setProperty('--btnHoverColor', hoverColor)
  pageMenuRef.value?.style.setProperty('--hoverColor', textColor)
}
</script>

<style scoped lang="scss">
.page-menu-container {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  --btnHoverColor: #8a8a8a3d;
  --hoverColor: #8a8a8a3d;
  font-size: $font-size-medium;

  .menu-container {
    padding-left: 15px;
    display: flex;
    justify-content: left;
    align-items: center;

    .menu-item {
      width: 60px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      &:hover {
        background-color: var(--btnHoverColor);
      }
    }
  }
}

.menu-dropdown-container {
  width: 180px;
  background-color: #eee;
  padding: 5px 0px;
  display: flex;
  flex-direction: column;
  font-size: $font-size-small;
  user-select: none;
  --btnHoverColor: #8a8a8a3d;

  .menu-dropdown-item {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px;
    &:hover {
      background-color: var(--btnHoverColor);
      color: var(--hoverColor);
    }
  }
}
</style>
